<template>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<a class="navbar-brand" href="/">JWMS</a>
		<button
			class="navbar-toggler"
			type="button"
			data-toggle="collapse"
			data-target="#navbarNavAltMarkup"
			aria-controls="navbarNavAltMarkup"
			aria-expanded="false"
			aria-label="Toggle navigation"
		>
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
			<div class="navbar-nav">
				<ul v-if="user.authenticated" class="nav">
					<router-link class="nav-item" to="/profile" tag="li">
						<a class="nav-link">个人中心</a>
					</router-link>

					<li class="nav-item">
						<a @click="logout" class="nav-link">退出</a>
					</li>
				</ul>
				<ul v-else class="nav">
					<router-link class="nav-item" to="/login" active-class="active" exact tag="li">
						<a class="nav-link">登录</a>
					</router-link>
					<router-link class="nav-item" to="/register" active-class="active" exact tag="li">
						<a class="nav-link">注册</a>
					</router-link>
				</ul>
			</div>
		</div>
	</nav>
</template>

<script>
import { mapState } from "vuex";
export default {
	computed: {
		...mapState({
			user: state => state.AuthUser
		})
	},
	methods: {
		logout() {
			this.$store
				.dispatch("logoutRequest")
				.then(res => {
					this.$router.push("/#");
				})
				.catch(err => {
					this.logger(err.response);
				});
		}
	}
};
</script>
<style lang="scss" scoped>
li.nav-item {
	padding: 0;
	a.nav-link {
		margin: 0;
		cursor: pointer;
	}
}
li.nav-item.router-link-active {
	background-color: #3490dc;
}
</style>
